<template>
  <div class="content">
    <div class="toper">
      <div class="back" @click="$router.back()">
        <van-icon name="arrow-left" color="#fff" size="24px" />
      </div>
    </div>
    <div class="content">
      <div class="detal-img">
        <h3 class="detal-title">最新精选商品</h3>
        <van-swipe class="my-swipe" :autoplay="3000">
          <van-swipe-item>
            <van-card
              price="2.00"
              desc="人类最初始的地方，一定要棒"
              title="商品标题"
              thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
            >
              <template #footer>
                <van-button size="mini" class="createNum">01</van-button>
              </template>
            </van-card>
          </van-swipe-item>
          <van-swipe-item>
            <van-card
              price="2.00"
              desc="人类最初始的地方，一定要棒"
              title="商品标题"
              thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
            >
              <template #footer>
                <van-button size="mini" class="createNum">02</van-button>
              </template>
            </van-card>
          </van-swipe-item>
          <van-swipe-item>
            <van-card
              price="2.00"
              desc="人类最初始的地方，一定要棒"
              title="商品标题"
              thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
            >
              <template #footer>
                <van-button size="mini" class="createNum">03</van-button>
              </template>
            </van-card>
          </van-swipe-item>
          <van-swipe-item>
            <van-card
              price="2.00"
              desc="人类最初始的地方，一定要棒"
              title="商品标题"
              thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
            >
              <template #footer>
                <van-button size="mini" class="createNum">04</van-button>
              </template>
            </van-card>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="detal-footer">
        <div class="detal-footer-left">
          <h2 class="detal-footer-num">{{eval}}</h2>
          <p class="detal-footer-des">
            <van-rate v-model="star" void-color="#666" color="#666"/>
          </p>
        </div>
        <div class="detal-footer-right">
          <h2 class="detal-footer-num">{{weight}}<span class="detal-footer-right-arrow">></span></h2>
          <p class="detal-footer-des">总销量/千</p>
        </div>
      </div>
      <div class="footer">
        <div class="footer-content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Card, Rate } from 'vant'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Card)
Vue.use(Rate)

export default {
  data () {
    return {
      title: '',
      desc: '',
      price: '',
      thumb: '',
      eval: '60.9',
      star: 3,
      weight: 10.6,
      num_img: 1
    }
  }
}
</script>

<style lang="scss" scoped>
.toper{
  padding: 0.1rem 0.1rem;
  .back{
    width:0.4rem;
    height:0.4rem;
    border-radius: 50%;
    background-color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.detal-title{
  padding-top:20px;
  padding-left: 12px;
  width:18px;
  font-size: 14px;
  line-height:20px;
  position:absolute;
  z-index : 999;
}
.my-swipe .van-swipe-item {
    // color: #fff;
    font-size: 20px;
    height:424px;
    line-height: 150px;
    text-align: center;
  }
  .van-card__header{
    flex-direction: column;
  }
  .van-card__thumb {
    width:200px;
    height:200px;
    left:0;
    right:0;
    top: 120px;
    margin:auto;
  }
  .van-card__content{
    margin-top: 100px;
    text-align:left;
  }
  .van-card__title{
    line-height:40px;
    font-size: 1.5em;
    font-weight: bold;
    color: #000;
  }
  .van-card__desc{
    line-height: 30px;
  }
  .detal-footer{
    padding-top: 30px;
    display: flex;
    justify-content: space-around;
  }
  .detal-footer-num{
    height:36px;
    line-height:36px;
  }
  .detal-footer-right-arrow{
    font-size: 16px;
  }
  .createNum{
    position:absolute;
    font-size: 16px;
  }
  .footer{
    padding-top:58px;
  }
  .footer-content{
    width: 300px;
    height: 6px;
    background-color: #666;
    border-radius: 5px;
    position: absolute;
    left:0;
    right:0;
    margin:auto;
  }
</style>
